var MyUI = {
	mapUI : function(parent,name,material,needModify){
		//建一个li 其中包含两个span  
		//第一个span包含 贴图名字 、 贴图是否显示
		//第二个span包含 贴图快照 、 贴图引用文件的名字
		var li = document.createElement('li');
		li.id = "material";
		//贴图名字
		var mapName = document.createElement('span');
		mapName.innerHTML = name + " : ";
		//贴图是否显示
		var isVisable = document.createElement('input');
		isVisable.type = 'checkbox';
		isVisable.style.marginTop = '9px';
		isVisable.addEventListener("change", function(){
			// manager.update();
			activeObject.material.map = null;
		});

		var map = document.createElement('span');
		//贴图快照
		var snapShoot = document.createElement('canvas');
		snapShoot.width = 32;
		snapShoot.height = 16;
		snapShoot.style.cursor = 'pointer';
		snapShoot.style.marginLeft = '5px';
		snapShoot.style.border = '1px solid #888';
		snapShoot.style.backgroundColor = '#ffffff';

		var input = document.createElement('input');
		input.type = 'file';
		input.addEventListener('change',function(evt){
			loadFile(evt.target.files[0]);
			console.log(evt.target.files[0]);
		});

		snapShoot.addEventListener('click',function(evt){
			input.click();
		});

		snapShoot.addEventListener('drop',function(evt){
			evt.prevtDefault();
			evt.stopPropagation();
			loadFile( evt.dataTransfer.files[ 0 ] );
		});

		//贴图引用文件的名字
		var imageName = document.createElement('input');
		imageName.disabled = true;
		imageName.style.width = '80px';
		imageName.style.height = '20.4px';
		imageName.style.border = '1px solid #ccc';
		imageName.style.marginLeft = '5px';
		imageName.style.marginTop = '2px';
		imageName.id = "materialName";
		// imageName.style.marginBottom = '5px';

		map.appendChild(snapShoot);
		map.appendChild(imageName);

		li.appendChild(mapName);
		li.appendChild(isVisable);
		li.appendChild(map);
	
		parent.firstChild.appendChild(li);

		function loadFile(file){
			// console.log('file.type');
			if(file.type.match( 'image.*' )){
				var reader = new FileReader();
				reader.addEventListener( 'load', function ( event ) {

					var image = document.createElement( 'img' );
					image.addEventListener( 'load', function( event ) {

					var texture = new THREE.Texture( this);
					imageName.value  = file.name;
					texture.needsUpdate = true;
					material.needsUpdate = true;
					material[name] = texture; 
					 

					var context = snapShoot.getContext( '2d' );
					if ( texture !== null ) {

						if ( texture.image !== undefined && texture.image.width > 0 ) {

							texture.image.value = texture.sourceFile;

							var scale = snapShoot.width / texture.image.width;
							context.drawImage( texture.image, 0, 0, texture.image.width * scale, texture.image.height * scale );

						} else {

							texture.image.value = texture.sourceFile + ' (error)';
							context.clearRect( 0, 0, snapShoot.width, snapShoot.height );

						}

					} else {

						texture.image.value = '';
						context.clearRect( 0, 0, snapShoot.width, snapShoot.height );

					}

					// if ( scope.onChangeCallback ) scope.onChangeCallback();

				}, false );

				image.src = event.target.result;

			}, false );
				reader.readAsDataURL( file );
				// var texture = new THREE.Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type );
				// material[map] = texture;
				
			}
		}
	}
}

